<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout/blank"><!-- layout文件路径-->
<head>
    <title>客户列表</title>
</head>
<body>
<div layout:fragment="content">
    <div class="card">
        <div class="card-body">
            <table id="grid-table"></table>
            <div id="grid-pager"></div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var query_url = "/customer/query.do";
    $(document).ready(function () {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        });

        $(grid_selector).jqGrid({
            url: query_url,
            datatype: "json",
            mtype: 'post',
            height: '100%',
            colNames: ['id', '用户名', '余额', '创建时间'],
            colModel: [{
                name: 'id',
                index: 'id',
                key: true,width:10,
                editable: false,
            }, {
                name: 'username',
                index: 'username',
                align: 'center', width:30,
                editable: true
            }, {
                name: 'balance',
                index: 'balance',width:30,
                align: 'center',
                editable: true,

            }, {
                name: 'create_time',
                index: 'create_time',
                fixed: true,width:100,
                resize: false,
                align: 'center',
                editable:false,formatter:"date",formatoptions: {srcformat:'u',newformat:'Y-m-d H:i:s'}
            }],
            viewrecords: true,
            rowNum: 20,
            rowList: [20, 30, 50],
            pager: pager_selector,
            altRows: true,
            gridview: true,
            autowidth:true,
            multiselect: false,
            multiboxonly: true,
            loadComplete: function () {
                $(grid_selector).closest(".ui-jqgrid-bdiv").css({'overflow-x': 'hidden'});
                var table = this;
            },
            caption: "客户列表",
            autowidth: true

        });
        $(window).triggerHandler('resize.jqGrid'); // trigger window resize
        $(grid_selector).jqGrid('navGrid', pager_selector, {
            del: false,
            add: false,
            edit: false,
            search: true
        }, {}, {}, {}, {multipleSearch: true})
            .navButtonAdd(pager_selector,{
                caption:"重置密码",
                buttonicon:"fa fa-lock",
                onClickButton: function(){
                    var s;
                    s = $(grid_selector).jqGrid('getGridParam', 'selrow');
                    console.log("id:"+s);
                    $.ajax({
                        'url': "/customer/resetPassword.do",
                        'data': {'id': s},
                        'dataType': 'json',
                        'type': 'post',
                        'success': function (result) {
                            if(result.code=='200'){
                                alert("请记住您的密码："+result.datas);
                            }else {
                                alert(result.message)
                            }
                        },
                        'async': false
                    });
                },
                position:"last"
            });
    });
</script>